<template>
  <div class="box">
    <div class="left">
      <div class="upload">
        <span>图书封面:</span>
        <input type="file" id="file" @change="add($event)" />
      </div>
    </div>
    <div class="right">
      <div class="item">
        <label>书名:</label>
        <input v-model="bname" type="text" placeholder="请输入书名" />
      </div>
      <div class="item">
        <label>昵称:</label>
        <input
          class="name"
          @blur="getId"
          v-model="name"
          type="number"
          placeholder="请输入你的昵称"
        />
      </div>
      <div class="item">
        <label>作者:</label>
        <input v-model="bname" type="text" placeholder="请输入作者名" />
      </div>
      <div class="item bwords-item">
        <label>推荐语:</label>
        <textarea
          class="bwords"
          v-model="bwords"
          type="text"
          placeholder="请输入推荐语"
        />
      </div>

      <div class="item bjj-item">
        <label>简介:</label>
        <textarea
          class="bjj"
          v-model="bjj"
          type="text"
          placeholder="请输入简介"
        />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { InputNumber } from "element-ui";
export default {
  data() {
    return {
      imgs: "",
      bname: "",
      author: "",
      bwords: "",
      bjj: "",
      bsrc: "",
      bid: 0,
      name: 0,
      id: 0,
    };
  },
  mounted() {
    this.getBid();
  },
  methods: {
    //上传图片
    add(e) {
      //获取到第一个文件
      var file = e.target.files[0];
      //可打印看看
      console.log(e.target.files);
      //新建一个 FormData 对象
      var param = new FormData();
      // 把文件添加到 FormData对象里
      param.append("icon", file);
      //可以打印看看
      console.log(param.get("file"));
      //利用axios发送post请求
      axios
        .post("http://127.0.0.1:3000/comic/add", param, {
          headers: { "Content-Type": "multipart/form-data" },
        })
        .then((res) => {
          //调用查询方法
          this.qy();
        });
    },
    //查询
    qy() {
      axios({
        url: "http://127.0.0.1:3000/comic/all",
        method: "get",
      }).then((res) => {
        //把后端返回数据赋值给imgs
        // `http://127.0.0.1:3000/` +.icon
        this.imgs = `http://127.0.0.1:3000/` + res.data.data[0].icon;
        // console.log("res.data.data.icon:", res.data.data[0].icon);
        console.log("imgs:", this.imgs);
      });
    },
    created() {
      this.qy();
    },
    getBid() {
      const url1 = "http://127.0.0.1:3000/v1/library/book/getbid";
      console.log(url1);
      this.axios.get(url1).then((res) => {
        this.bid = res.data[0].bid + 1;
        console.log("this.bid:", this.bid);
      });
    },
    getId() {
      const url2 = "http://127.0.0.1:3000/v1/library/book/getid";
      this.name = Number(this.name);
      const params = `id=${this.name}`;
      // const params = { id: this.name };
      console.log(url2, params, typeof params);
      this.axios.get(url2, params).then((res) => {
        console.log("this.name:", typeof this.name);
        this.id = res.data;
        console.log("this.id:", this.id);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 1200px;
  height: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid black;

  .left {
    // width: 200px;
    // height: 200px;
    border: 1px solid black;
  }
  .right {
    // width: 250px;
    border: 1px solid black;
    .bjj-item {
      display: flex;
      justify-content: space-between;
    }
    .bwords-item {
      display: flex;
      justify-content: space-between;
    }
    .item {
      margin: 15px;
      display: flex;
      // justify-content: space-between;

      input {
        margin-left: 20px;
        padding-left: 5px;
      }
      .bjj {
        width: 300px;
        height: 150px;
      }
      .bwords {
        width: 300px;
        height: 50px;
      }
    }
  }
}
</style>